<template>
	<el-form ref="refSeach" :inline="true" :model="formInline" size="mini">
		<el-form-item label-width="100px" prop="caseNo" label="文书编号">
			<el-input v-model="formInline.caseNo" placeholder="请输入..."></el-input>
		</el-form-item>
		<el-form-item label-width="100px" prop="inspectionNo" label="案件性质">
			<el-input v-model="formInline.inspectionNo" placeholder="请输入..."></el-input>
		</el-form-item>
		<el-form-item label-width="100px" prop="caseName" label="案件名称">
			<el-input v-model="formInline.caseName" placeholder="请输入..."></el-input>
		</el-form-item>
		<el-form-item label-width="100px" prop="caseTime" label="案发时间">
			<el-date-picker
				v-model="caseTime"
				format="YYYY-MM-DD"
				value-format="YYYY-MM-DD"
				type="daterange"
				start-placeholder="开始时间"
				end-placeholder="结束时间"
				style="width: 220px"
			>
			</el-date-picker>
		</el-form-item>
		<el-form-item label-width="100px" prop="hostUserName" label="主办干警">
			<el-input v-model="formInline.hostUserName" placeholder="请输入..."></el-input>
		</el-form-item>
		<el-form-item label-width="100px" prop="hostUserOrganName" label="主办单位">
			<el-input v-model="formInline.hostUserOrganName" placeholder="请输入..."></el-input>
		</el-form-item>
		<el-form-item style="margin-left: 20px">
			<el-button type="primary" @click="onSubmit" icon="el-icon-search" size="small">查询</el-button>
			<el-button type="primary" @click="onRest" icon="el-icon-view" size="small">重置</el-button>
			<el-button type="success" plain @click="exportExcel('first', '导出的数据', outTypeTitle + '.xlsx')" icon="el-icon-document" size="small"
				>导出</el-button
			>
		</el-form-item>
	</el-form>
	<el-tabs v-model="activeName" @tab-click="handleTabsClick" activeName="first">
		<el-tab-pane :label="'未' + outTypeTitle" name="first"
			><List id="first" ref="listRef" :tableData="tableData" @reload="init" :outType="outType" :pager="pager"
		/></el-tab-pane>
		<el-tab-pane :label="'已' + outTypeTitle" name="second"
			><OverList id="second" ref="unListRef" :tableData="tableData" @reload="init" :outType="outType" :pager="pager"
		/></el-tab-pane>
	</el-tabs>
</template>

<script lang="ts">
import { ref, toRefs, reactive, toRef } from 'vue';
import List from '/@/views/evidence/common/list.vue';
import OverList from '/@/views/evidence/common/overlist.vue';
import { exportExcel } from '/@/common/excel.ts';
import { getCaseTransferePager } from '/@/api/case/index';
import { getOutType } from '/@/common/index';
export default {
	name: 'BorrowEvidence',
	components: { List, OverList },
	props: { outType: String },
	setup(props: any) {
		const state = reactive({
			outType: props.outType,
			outTypeTitle: getOutType(props.outType),
			activeName: 'first',
			tableData: [],
			caseTime: [],
			pager: {
				page: 1,
				pageSize: 10,
				total: 0,
			},
			formInline: {
				caseNo: '',
				inspectionNo: '',
				caseName: '',
				hostUserName: '',
				hostUserOrganName: '',
				caseTimeStart: '',
				caseTimeEnd: '',
				activeName: '',
				deliveryDicType: '',
				page: 1,
				pageSize: 10,
			},
		});
		const listRef = ref();
		const overListRef = ref();
		async function onSubmit() {
			init();
		}
		async function onRest() {
			refSeach.value.resetFields();
		}
		async function handleTabsClick() {
			state.tableData = [];
			state.pager.total = 0;
			init();
		}
		async function init() {
			state.formInline.caseTimeStart = '';
			state.formInline.caseTimeEnd = '';
			state.formInline.activeName = state.activeName;
			state.formInline.deliveryDicType = props.outType;
			state.formInline.page = toRef(state.pager, 'page').value;
			state.formInline.pageSize = toRef(state.pager, 'pageSize').value;
			if (state.caseTime && state.caseTime.length > 1) {
				state.formInline.caseTimeStart = state.caseTime[0];
				state.formInline.caseTimeEnd = state.caseTime[1];
			}
			await getCaseTransferePager(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.pager.total = res.data.totalCount;
				}
			});
		}
		const refSeach = ref();
		init();
		return {
			exportExcel,
			listRef,
			overListRef,
			onSubmit,
			onRest,
			refSeach,
			init,
			handleTabsClick,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
